<template>
    <p>混合式api</p>
    <p>count:{{ count }}</p>
    <p>test:{{ test }}</p>
    <p>reactive========</p>
    <p>obj:{{ obj }}</p>
    <p>obj的名字:{{ obj.name }}</p>
    <p>obj的年龄:{{ obj.age }}</p>

    
    <p>computed======</p>
    <P>countAddTwo:{{ countAddTwo }}</P>
    <p>objAgeAddFive:{{ objAgeAddFive }}</p>

    <button @click="countAddOne">count+1</button>
    <button @click=" countThree">count+3</button>
    <button @click="updateObj">更新obj</button>

</template>

<script setup>


//引入
import { ref,reactive,computed,watch} from 'vue'

//声明
const count = ref(0)
const test = ref('你好')

const obj = reactive(
    {
        name:'tom',
        age:12
    }
)

const countAddTwo = computed(
    ()=>{
        return count.value + 2
    }
)

const objAgeAddFive = computed(
    ()=>{
        return obj.age+5
    }
)



function countAddOne(){
    count.value++
}

function countThree(){
    count.value +=3
}

function updateObj(){
    updateObjName()
}

function updateObjName(){
    obj.name='jerry'
}

watch(count,(newVal,oldVal)=>{
    console.log('newVal',newVal);
    console.log('oldVal',oldVal);
})


watch(countAddTwo,(newVal,oldVal)=>{
    console.log('countAddOTwonewVal',newVal);
    console.log('countAddTwooldVal',oldVal);
})

watch(obj,(newVal,oldVal)=>{
    console.log('objnewVal',newVal);
    console.log('objoldVal',oldVal);
})

watch(()=>obj.name,(newVal,oldVal)=>{
    console.log('obj.name newVal',newVal);
    console.log('obj.name oldVal',oldVal);
})


//使用

// alert(count.value)
console.log('obj=========',(obj))

console.log('log的名字',obj.name);


</script>